<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>回溯测试指标</title>
{{include 'pages/base/layout.html'}}
<script type="text/javascript" src="{{=URL('static','adminlte/plugins/highcharts/highcharts.js')}}"></script>
</head>
<body>

<div class='container'>
    <div class="row">
        <small><label  class="col-sm-1 control-label ">年华收益率</label></small>
        <small><label  class="col-sm-1 control-label ">基准年华收益率</label></small>
        <small><label  class="col-sm-1 control-label ">阿尔法</label></small>
        <small><label  class="col-sm-1 control-label ">贝塔</label></small>
        <small><label  class="col-sm-1 control-label ">夏普比率</label></small>
        <small><label  class="col-sm-1 control-label ">收益波动率</label></small>
        <small><label  class="col-sm-1 control-label ">信息比率</label></small>
        <small><label  class="col-sm-1 control-label ">最大回撤</label></small>
        <small><label  class="col-sm-3 control-label "></label></small>
    </div>
    <div class="row">
        <h4><label  class="col-sm-1 control-label ">37%</label></h4>
        <h4><label  class="col-sm-1 control-label ">5.8%</label></h4>
        <h4><label  class="col-sm-1 control-label ">0.15</label></h4>
        <h4><label  class="col-sm-1 control-label ">0.84</label></h4>
        <h4><label  class="col-sm-1 control-label ">1.27</label></h4>
        <h4><label  class="col-sm-1 control-label ">0.23</label></h4>
        <h4><label  class="col-sm-1 control-label ">1.04</label></h4>
        <h4><label  class="col-sm-1 control-label ">32%</label></h4>
        <h4><label  class="col-sm-3 control-label "></label></h4>
    </div>
</div>
<div id="container" style="width: 98%; height: 400px; margin: 0 auto">
</div>
<script language="JavaScript">
$(document).ready(function() {
   var title = {
      text: '累计收益率'
   };
   var subtitle = {
      text: '',
   };
   var xAxis = {
      categories: ['2011-01', '2011-02', '2011-03', '2011-04', '2011-05', '2011-06',
         '2011-07', '2011-08', '2011-09', '2011-10', '2011-11', '2011-12']
   };
   var yAxis = {
      title: {
         text: '累积收益率 (%)'
      },
      plotLines: [{
         value: 0,
         width: 1,
         color: '#808080'
      }]

   };

   var tooltip = {
      valueSuffix: '%'
   }

   var legend = {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
   };
   var series =  [
      {
         name: '策略',
         data: [-0.2*0.01, 0.8*0.01, 5.7*0.01, 11.3*0.01, 17.0*0.01, 22.0*0.01, 24.8*0.01,
            24.1*0.01, 20.1*0.01, 14.1*0.01, 8.6*0.01, 2.5*0.01]
      },
      {
         name: '基准',
         data: [3.9*0.01, 4.2*0.01, 5.7*0.01, 8.5*0.01, 11.9*0.01, 15.2*0.01, 17.0*0.01,
            16.6*0.01, 14.2*0.01, 10.3*0.01, 6.6*0.01, 4.8*0.01]
      }
   ];
     credits: {
        enabled: false
    };

   var json = {};

   json.title = title;
    json.subtitle = subtitle;
    json.xAxis = xAxis;
    json.yAxis = yAxis;
    json.tooltip = tooltip;
    json.legend = legend;
    json.series = series;
//    json.credits = credits;

   $('#container').highcharts(json);
    console.log($('testDict'))
});
</script>
</body>
</html>